<script setup>
import { ref } from "vue";
// 我们的机型顶部区域适配
const { safeAreaInsets } = uni.getSystemInfoSync();
</script>
<template>
  <!-- 头部导航栏开始 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <!-- <image class="logo-image" src="@/static/images/logo.png"></image> -->

      <!-- 首页字样 -->
      <view>
        <text class="home">我的</text>
      </view>
    </view>
  </view>
  <!-- 头部导航栏结束 -->

  <!-- 头像区域开始 -->
  <view class="avatar_wraper">
    <!-- 头像 -->
    <view class="avatar">
      <image src="../../static/images/xhz_start.webp" mode="scaleToFill" />
    </view>
    <!-- 用户昵称 -->
    <view class="nickname">欢迎您：小陆同学</view>

    <!-- 线 -->
    <view class="line"></view>
  </view>
  <!-- 头像区域结束 -->

  <!-- 设置列表开始 -->
  <view class="set_list">
    <view class="set_item">
      <view class="user_wrpaer">
        <image src="../../static/images/user_info.png" mode="scaleToFill" />
        <view class="title">个人信息</view>
      </view>
      <view class="arrow"></view>
    </view>
    <navigator url="/pages/allOrder/allOrder" open-type="navigate" hover-class="navigator-hover">
      <view class="set_item">
        <view class="user_wrpaer">
          <image src="../../static/images/all_order.png" mode="scaleToFill" />
          <view class="title">全部订单</view>
        </view>
        <view class="arrow"></view>
      </view>
    </navigator>
    <navigator
      url="/pages/dataManger/dataManger"
      open-type="navigate"
      hover-class="navigator-hover"
    >
      <view class="set_item">
        <view class="user_wrpaer">
          <image src="../../static/images/data_manage.png" mode="scaleToFill" />
          <view class="title">数据管理</view>
        </view>
        <view class="arrow"></view>
      </view>
    </navigator>
    <navigator url="/pages/set/set" hover-class="none">
      <view class="set_item">
        <view class="user_wrpaer">
          <image src="../../static/images/set.png" mode="scaleToFill" />
          <view class="title">设置</view>
        </view>
        <view class="arrow"></view>
      </view>
    </navigator>
  </view>

  <!-- 设置列表结束 -->
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f7f7f7;
}
/* 自定义导航条开始 */
.navbar {
  width: 100%;
  background-color: #4dc58e;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  height: 120rpx;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    padding-top: 20rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      // flex: 1;
      line-height: 28rpx;
      color: #fff;
      font-family: "华文新魏";
      font-size: 50rpx;
    }
    .home {
      margin-left: 290rpx;
      color: #fff;
      font-weight: bold;
    }
  }
}
// 自定义导航条结束

// 头像区域样式开始
.avatar_wraper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 300rpx;
  padding: 0rpx 40rpx;
  // background-color: #bfa;
  .avatar {
    width: 180rpx;
    height: 180rpx;
    // background-color: green;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .nickname {
    margin-left: 40rpx;
  }
  .line {
    width: 100%;
    height: 1rpx;
    background-color: #ccc;
    margin-bottom: 50rpx;
  }
}
// 头像区域样式结束

// 设置样式区域开始
.set_list {
  // width: 100%;
  height: 800rpx;
  // background-color: #bfa;
  // padding: 20rpx 40rpx;
  box-sizing: border-box;
  .set_item {
    padding: 0rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // width: 100%;
    height: 100rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    .user_wrpaer {
      display: flex;
      align-items: center;
      .title {
        margin-left: 20rpx;
        font-size: 30rpx;
      }
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .arrow {
      width: 30rpx;
      height: 30rpx;
      background: url("../../static/images/arrow.png") no-repeat;
      background-size: cover;
    }
  }
}
// 设置样式区域结束
</style>
